<dialog>

使用例

code:dialog.html

<dialog id="favDialog">

<form method="dialog">

<p><label>Favorite animal:

<select>

<option></option>

<option>Brine shrimp</option>

<option>Red panda</option>

<option>Spider monkey</option>

</select>

</label></p>

<menu>

<button value="cancel">Cancel</button>

<button id="confirmBtn" value="default">Confirm</button>

</menu>

</form>

</dialog>

code:script.js

// dialog windwを作成する

async function makeDialog() {

const html = await fetch('/api/code/takker/<dialog>/dialog.html').then(res => res.text());

const div = document.createElement('div');

div.innerHTML = html;

document.body.appendChild(div);

return document.getElementById('favDialog');

}

function showDialog() {

const dialog = document.getElementById('favDialog') ?? makeDialog();

dialog.showModal();

}

scrapbox.PageMenu.addMenu({

title: 'show dialog',

image: '/assets/img/logo.png',

onClick: showDialog

});

Reference

code:css

/** dialogが開いているときは、overlayの下がスクロールされないようにする*/

overflow: hidden;

}

記事だとJSで制御している

要素は適宜、scrollが発生しているものに置き換えること